<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <!--  <link rel="stylesheet" href="qv.css">-->
</head>
<body style="background: transparent">
<h1>
  PROCESS - MONITOR
</h1>
<div>
  <label> 工程参数选择: <select onchange="showTable(value)">
    <option value="AMAC">中视场彩色相机</option>
    <option value="AWAC">宽视场导航敏感器</option>
    <option value="ANAC">窄视场导航敏感器</option>
    <option value="AMSC">多光谱相机</option>
    <option value="ARDIS">旋转衍射高光谱相机</option>
    <option value="ATES">热辐射光谱仪</option>
    <option value="AVIRIS">可见红外成像光谱仪</option>
    <option value="DMA">喷发物分析仪-尘埃分析仪</option>
    <option value="VITA">喷发物分析仪-挥发分分析仪</option>
    <option value="CANPA">带电粒子与中性粒子分析仪</option>
    <option value="ALADAR">激光一体化导航敏感器</option>
    <option value="ACSR">探测雷达</option>
    <option value="AMAG">磁强计</option>
    <option value="APMU" >载荷管理单元</option>
  </select></label>
</div>

<table class="table table-hover table-striped table-sm table-bordered">
  <thead>
  <tr>
    <th>序号</th>
    <th>ID</th>
    <th>参数</th>
    <th>源码</th>
    <th>转换值</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/omsp/yc/gc.js"></script>
<script src="/omsp/yc/amac.js"></script>
<script src="/omsp/yc/apmu.js"></script>
<script src="/omsp/yc/ates.js"></script>
<script src="/omsp/yc/aviris.js"></script>
<script src="/omsp/yc/amsc.js"></script>
<script src="/omsp/yc/acsr.js"></script>
<script src="/omsp/yc/amag.js"></script>
<script src="/omsp/yc/canpa.js"></script>
<script src="/omsp/yc/vita.js"></script>
<script src="/omsp/yc/dma.js"></script>
<script>
  // fetch('http://localhost:8086/query?pretty=true&db=mydb&q=SELECT value FROM cpu_load_short')
  window.onload = async () => {
    r = new Inflex()
    oo = await r.execute(
      `SELECT last(*)
       FROM "TW2-AMAC-GCYC"`)
    let rt = oo.results
    let o = rt[0].series[0]
    values = o.values[0]
    names = o.columns
    name = o.name
    $('h1').text(name)
    params = {}
    aa = v => /_(.+_(\d+)):(.+)/.exec(v)

    names.forEach((n, i) => {
      let a = aa(n) || ['', 'TIME', '00000', '时间'];
      N = a[2].padStart(5, '0')
      if (!params[N]) params[N] = []
      if (n.endsWith('_'))
        params[N.trim('_')][4] = values[i];
      else
        params[N] = [N, a[1], a[3], values[i], params[N][4]];
    })
    r = Object.values(params).sort()
    $('tbody').html(
      r.map((a) => `<tr><td>${parseInt(a[0], 10)}</td><td>${a[1]}</td><td> ${a[2]}</td><td> ${a[3]}</td><td> ${a[4] || ''}</td></tr>`).join('')
    )
  }

  async function showTable(v){
      r = new Inflex()
      oo = await r.execute(
      `SELECT last(*)
       FROM "TW2-` + v + `-GCYC"`)
  }
</script>
</body>
</html>